<template>
  <div class="app-container search-table-box aidex-table">
    <el-card shadow="never" style="margin-bottom: 12px;" >
      <el-tabs v-model="activeName" >
        <el-tab-pane label="上传采集" name="first">
            <el-form ref="uploadForm" label-width="150px" size="mini">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="选择票夹(必填):">
                    <el-select v-model="uploadFolderId" placeholder="请选择票夹" clearable filterable @change="handleChangeFolder">
                      <el-option
                        v-for="folder in folderList"
                        :key="folder.folderId"
                        :label="folder.folderName"
                        :value="folder.folderId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="选择本地文件(必填):">
                    <el-alert
                      title="上传发票文件(pdf/jpg/jpeg/png格式)，单个图片不大于6M，单个PDF文件不大于10M，至多可上传50个文件同时提交（pdf文件支持多页全票种识别)"
                      :closable="false"
                      type="warning"
                      style="margin-bottom: 10px;"
                      show-icon>
                    </el-alert>
                    <el-upload
                      ref="upload"
                      :limit="50"
                      accept=".jpg, .jpeg, .png, .pdf, .ofd"
                      :headers="upload.headers"
                      action="#"
                      :disabled="upload.isUploading"
                      :on-progress="handleFileUploadProgress"
                      :before-upload="handleBeforeUpload"
                      :on-success="handleFileSuccess"
                      :file-list="fileList"
                      :multiple="true"
                      drag
                    >
                      <i class="el-icon-upload"></i>
                      <div class="el-upload__text">
                        将文件拖到此处，或
                        <em>点击上传</em>
                      </div>
                    </el-upload>
                  </el-form-item>
                  <el-row>
                    <el-col :span="20">
                      <el-form-item>
                        <el-button size="mini" type="primary" @click="submitFileForm" :loading="upload.isUploading">提 交</el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>

                </el-col>
              </el-row>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="手工录入" name="second">
            <el-row :gutter="24">
              <el-col :span="7">
                <el-form ref="manualCheckItemForm" :model="manualCheckItem" :rules="manualCheckRules"  label-width="140px" >
                  <el-form-item label="票夹(必填):" prop="uploadFolderId">
                    <el-select v-model="manualCheckItem.folderId" placeholder="请选择票夹"  size="mini" style="width: 260px;" clearable filterable  @change="handleChangeFolderForManual">
                      <el-option
                        v-for="folder in folderList"
                        :key="folder.folderId"
                        :label="folder.folderName"
                        :value="folder.folderId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="发票类型(必填):" prop="uploadFolderId">
                    <el-select v-model="manualCheckItem.invoiceType" placeholder="请选择发票类型" clearable filterable style="width: 260px;" size="mini">
                      <el-option
                        v-for="dict in dict.type.invoice_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="发票号码(必填):" prop="invoiceNo">
                    <el-input v-model="manualCheckItem.invoiceNo" style="width: 260px" size="mini"></el-input>
                  </el-form-item>
                  <el-form-item label="发票代码(必填):" prop="invoiceCode">
                    <el-input v-model="manualCheckItem.invoiceCode" style="width: 260px" size="mini"></el-input>
                  </el-form-item>
                  <el-form-item label="开票日期(必填):" prop="invoiceDate">
                    <el-date-picker
                      type="date"
                      size="mini"
                      placeholder="选择日期"
                      v-model="manualCheckItem.invoiceDate"
                      value-format="yyyy-MM-dd"
                      style="width: 260px"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="不含税金额(必填):" prop="feeWithoutTax">
                    <el-input v-model="manualCheckItem.feeWithoutTax"  style="width: 260px" size="mini"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="addManualCheckItem" plain icon="el-icon-plus" style="width: 200px">继续录入</el-button>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="1">
                <div>
                  <svg-icon icon-class="dright" style="font-size: 64px;" />
                </div>
              </el-col>
              <el-col :span="16">
                <el-row>
                  <el-col :span="24">
                    <el-table
                      :data="manualCheckList"
                      height="350"
                      border
                      @row-click="handleManualCheckRowClick"
                      style="width: 100%">
                      <el-table-column label="序号" type="index" align="center" width="55">
                        <template slot-scope="scope">
                          <span>{{scope.$index + 1}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="folderName"
                        label="票夹"
                        width="120">
                      </el-table-column>
                      <el-table-column
                        prop="invoiceNo"
                        label="发票号码"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="invoiceCode"
                        label="发票代码">
                      </el-table-column>
                      <el-table-column
                        prop="invoiceDate"
                        label="开票日期">
                      </el-table-column>
                      <el-table-column
                        prop="feeWithoutTax"
                        label="不含税金额">
                      </el-table-column>
                      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="80">
                        <template slot-scope="scope">
                          <el-button
                            type="text"
                            style="color: red"
                            @click="deleteManualCheck(scope.index)"
                          >删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
                <el-row style="padding: 10px 0;">
                  <el-col :span="24" >
                    <el-button type="primary" size="mini" @click="submitManualCheckItem" style="float: right; margin-left: 10px">提 交</el-button>
                    <el-button type="danger" size="mini" @click="removeAllManualCheckItem" style="float: right">清 空</el-button>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="扫码枪录入" name="third">
          <el-alert
            title="扫码时请确认光标置于下方输入框内，且输入法为英文输入状态"
            type="warning"
            :closable="false"
            style="margin-bottom: 10px"
            show-icon>
          </el-alert>
          <el-form ref="scanForm" v-model="scanForm" :rules="scanFormRules" label-width="150px" size="mini">
            <el-row>
              <el-col :span="12">
                <el-form-item label="选择票夹(必填):" prop="folderId">
                  <el-select v-model="scanForm.folderId" placeholder="请选择票夹" size="mini" clearable filterable>
                    <el-option
                      v-for="folder in folderList"
                      :key="folder.folderId"
                      :label="folder.folderName"
                      :value="folder.folderId"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="扫码内容:" prop="qrcode">
                  <el-input v-model="scanForm.qrcode" placeholder="请将光标置于此处"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item>
                  <el-button type="primary" @click="submitScanForm" >提 交</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="Excel导入" name="fourth">
          <el-form ref="excelImportForm" v-model="excelImportForm" :rules="excelImportFormRules" label-width="170px" size="mini">
            <el-row>
              <el-col :span="12">
                <el-form-item label="选择票夹(必填):"  prop="excelImportFormfolderId">
                  <el-select v-model="excelImportForm.folderId" placeholder="请选择票夹" @change="handleChangeExcelFolder" clearable filterable >
                    <el-option
                      v-for="folder in folderList"
                      :key="folder.folderId"
                      :label="folder.folderName"
                      :value="folder.folderId"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="下载Excel模板:" >
                <el-button type="info" @click="downloadTemplate" icon="el-icon-download" size="mini" plain>下载模板</el-button>
              </el-form-item>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="选择Excel文件(必填):" prop="file">
                  <el-upload
                    ref="excelUpload"
                    accept=".xlsx, .xls"
                    :headers="excelUpload.headers"
                    :action="excelUpload.url"
                    :disabled="excelUpload.isUploading"
                    :on-progress="handleExcelFileUploadProgress"
                    :on-success="handleExcelFileSuccess"
                    :before-upload="handleExcelBeforeUpload"
                    :auto-upload="false"
                    name="excelFile"
                  >  <el-button size="mini" icon="el-icon-upload" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="13">
                <el-form-item>
                  <el-alert
                    title="文件必须为2003版.xls文件(.xls) 或 2007版excel文件 (.xlsx)，且最大不超过300条数据"
                    type="warning"
                    :closable="false"
                    show-icon>
                  </el-alert>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="20">
                <el-form-item>
                  <el-button size="mini" type="primary" @click.stop="submitExcelFileForm" :loading="excelUpload.isUploading">提 交</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-card shadow="never" ref="queryRef" style="margin-bottom: 12px;" class="search_card" v-show="showSearch">
      <div class="filter-container">
        <div class="search_box" style="padding-bottom: 16px">
          <el-form :model="queryParams" ref="queryForm" label-width="80px" size="mini">
            <el-row :gutter="16">
              <el-col :md="6">
                <el-form-item label="采集时间">
                  <el-date-picker
                    v-model="daterangeCreateTime"
                    style="width: 100%"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :md="6">
                <el-form-item>
                  <el-button class="filter-item" type="primary" @click="handleQuery">搜索</el-button>
                  <el-button class="filter-item" style="margin-left: 8px" @click="resetQuery">重置</el-button>
                </el-form-item>
              </el-col>
              <el-col :md="12" align="right" class="longBtnBar">
<!--                <el-form-item >-->
<!--                  <el-button class="filter-item" type="primary" @click="handleImport">上传采集</el-button>-->
<!--                  <el-button class="filter-item" style="margin-left: 8px" @click="resetQuery">导入采集</el-button>-->
<!--                  <el-button class="filter-item" style="margin-left: 8px" @click="handleManualCheck">手工录入</el-button>-->
<!--                </el-form-item>-->
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </el-card>
    <el-card shadow="never" >
      <template #header>
        <el-row>
          <el-col :span="8">
            <div class="card-header">
              <el-button disabled type="text">发票采集信息</el-button>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="btn_box" align="right" style="float: right;">
              <el-button
                class="filter-item"
                style="margin-left: 8px;"
                icon="el-icon-download"
                @click="handleExport"
                size="mini"
                v-hasPermi="['doc:collect:export']"
              >导出</el-button>
              <right-toolbar :showSearch.sync="showSearch" :columns.sync="columns" :columnsKey.sync="columnsKey" @showSearchFun="showSearchFun" @queryTable="getList" :tableKey.sync="tableKey"></right-toolbar>
            </div>
          </el-col>
        </el-row>
      </template>

      <el-table
              border
              stripe
              default-expand-all
              ref="tableRef"
              :key="tableKey"
              v-loading="loading"
              :data="collectList"
              @selection-change="handleSelectionChange"
              :row-style="rowClass"
              :header-cell-style= "{
                'font-size': '14px !important',
                'font-weight': '500 !important',
                'color': 'rgb(0 0 0)',
                'background-color': 'rgb(205 224 255)',
              }"
              highlight-current-row style="width: 100%;"
              :height="tableHeight"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" type="index" align="center" width="55">
          <template slot-scope="scope">
            <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <template v-for="item in columns">
<!--          <el-table-column label="公司" align="center" key="siteName" prop="siteName" v-if="item.visible && item.label=='公司'" :show-overflow-tooltip="true"/>-->
          <el-table-column label="采集批次号" align="center" prop="collectNo" v-if="item.visible && item.label=='采集批次号'" width="180" :show-overflow-tooltip="true"/>
          <el-table-column label="采集人" align="center" prop="createName" v-if="item.visible && item.label=='采集人'"/>
          <el-table-column label="采集时间" align="center" prop="createTime" v-if="item.visible && item.label=='采集时间'" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="采集状态" align="left" prop="collectStatus" v-if="item.visible && item.label=='采集状态'">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.collect_status" :value="scope.row.collectStatus"/>
            </template>
          </el-table-column>
          <el-table-column label="采集方式" align="left" prop="collectType" v-if="item.visible && item.label=='采集方式'">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.collect_type" :value="scope.row.collectType"/>
            </template>
          </el-table-column>
          <el-table-column label="采集数量" align="left" prop="collectQty" v-if="item.visible && item.label=='采集数量'">
          </el-table-column>
          <el-table-column label="识别失败" align="left" prop="collectFail" v-if="item.visible && item.label=='识别失败'">
          </el-table-column>
          <el-table-column label="重复采集" align="left" prop="collectRepeat" v-if="item.visible && item.label=='重复采集'">
          </el-table-column>
          <el-table-column label="采集成功" align="left" prop="collectSuccess" v-if="item.visible && item.label=='采集成功'">
          </el-table-column>
          <el-table-column label="异常发票" align="left" prop="collectException" v-if="item.visible && item.label=='异常发票'">
          </el-table-column>
          <el-table-column label="查验成功" align="left" prop="checkSuccess" v-if="item.visible && item.label=='查验成功'">
          </el-table-column>
          <el-table-column label="查验失败" align="left" prop="checkFail" v-if="item.visible && item.label=='查验失败'">
          </el-table-column>
        </template>
        <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="150">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleViewResult(scope.row)"
              v-hasPermi="['doc:invoice:edit']"
            >查看结果</el-button>
          </template>
        </el-table-column>
        <div slot="empty">
          <svg-icon icon-class="search-none" style="font-size: 64px;" />
          <p>暂无数据</p>
        </div>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 手动检查对话框 -->
<!--      <el-dialog :close-on-click-modal="false" title="手工检查" :visible.sync="manualCheckOpen" width="1000px" top="10vh" append-to-body>-->
<!--        <div style="height: 390px;overflow: auto; padding: 12px 24px;">-->
<!--          <el-row :gutter="24">-->
<!--            <el-col :span="12">-->
<!--              <el-table-->
<!--                :data="manualCheckList"-->
<!--                height="350"-->
<!--                border-->
<!--                @row-click="handleManualCheckRowClick"-->
<!--                style="width: 100%">-->
<!--                <el-table-column-->
<!--                  prop="invoiceNo"-->
<!--                  label="发票号码"-->
<!--                  width="180">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="invoiceCode"-->
<!--                  label="发票代码">-->
<!--                </el-table-column>-->
<!--                <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="80">-->
<!--                  <template slot-scope="scope">-->
<!--                    <el-button-->
<!--                      type="text"-->
<!--                      @click="deleteManualCheck(scope.index)"-->
<!--                    >删除</el-button>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--              </el-table>-->
<!--            </el-col>-->
<!--            <el-col :span="12">-->
<!--              <el-form ref="manualCheckItemForm" :model="manualCheckItem" :rules="manualCheckRules"  label-width="130px" >-->
<!--                <el-form-item label="发票类型(必填):">-->
<!--                  <el-select v-model="manualCheckItem.invoiceType" placeholder="请选择发票类型" clearable filterable style="width: 260px;" size="mini">-->
<!--                    <el-option-->
<!--                      v-for="dict in dict.type.invoice_type"-->
<!--                      :key="dict.value"-->
<!--                      :label="dict.label"-->
<!--                      :value="dict.value"-->
<!--                    ></el-option>-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="发票号码(必填):">-->
<!--                  <el-input v-model="manualCheckItem.invoiceNo" style="width: 260px" size="mini"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="发票代码(必填):">-->
<!--                  <el-input v-model="manualCheckItem.invoiceCode" style="width: 260px" size="mini"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="开票日期(必填):">-->
<!--                  <el-date-picker type="date" placeholder="选择日期" v-model="manualCheckItem.invoiceDate" style="width: 260px"></el-date-picker>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="不含税金额(必填):">-->
<!--                  <el-input v-model="manualCheckItem.feeWithoutTax"  style="width: 260px" size="mini"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item>-->
<!--                  <el-button type="primary" @click="addManualCheckItem" plain icon="el-icon-plus" style="width: 200px">继续录入</el-button>-->
<!--                </el-form-item>-->
<!--              </el-form>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--        </div>-->
<!--        <div slot="footer" class="dialog-footer">-->
<!--          <el-button type="primary"  size="mini" @click="submitForm">全部检查</el-button>-->
<!--          <el-button  size="mini" @click="manualCheckOpen = false">取 消</el-button>-->
<!--        </div>-->
<!--      </el-dialog>-->

      <!-- 添加或修改发票采集对话框 -->
      <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="1200px" top="10vh" append-to-body>
        <div style="height: 490px;overflow: auto; padding: 12px 24px;">

          <div>
            <el-row :gutter="20">
              <el-alert
                :title="form.createTime + '上传采集任务已处理完成，合计采集发票 ' + tInCollectEntryList.length + ' 张'"
                type="success"
                :closable="false">
              </el-alert>
            </el-row>
            <el-row :gutter="20" style="margin-top: 10px">
              <el-col :span="4" style="padding-left: 10px;padding-right: 10px;border-bottom: 1px solid;border-top: 1px solid;border-left: 1px solid;padding: 14px 0;">
                <div>
                  <el-statistic title="识别失败">
                    <template slot="formatter">
                      {{form.collectFail}}张
                    </template>
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="4" style="padding-left: 10px;padding-right: 10px;border-bottom: 1px solid;border-top: 1px solid;border-left: 1px solid;padding: 14px 0;">
                <div>
                  <el-statistic title="重复采集">
                    <template slot="formatter">
                      {{form.collectRepeat}}张
                    </template>
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="4" style="padding-left: 10px;padding-right: 10px;border-bottom: 1px solid;border-top: 1px solid;border-left: 1px solid;padding: 14px 0;">
                <div>
                  <el-statistic title="入池成功">
                    <template slot="formatter">
                      {{form.collectSuccess}}张
                    </template>
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="4" style="padding-left: 10px;padding-right: 10px;border-bottom: 1px solid;border-top: 1px solid;border-left: 1px solid;padding: 14px 0;">
                <div>
                  <el-statistic title="异常发票">
                    <template slot="formatter">
                      {{form.collectException}}张
                    </template>
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="4" style="padding-left: 10px;padding-right: 10px;border-bottom: 1px solid;border-top: 1px solid;border-left: 1px solid;padding: 14px 0;">
                <div>
                  <el-statistic title="查验成功">
                    <template slot="formatter">
                      <i
                        class="el-icon-star-on"
                        style="color:green"
                      ></i>
                      {{form.checkSuccess}}张
                    </template>
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="4" style="padding-left: 10px;padding-right: 10px;border-bottom: 1px solid;border-top: 1px solid;border-right: 1px solid;border-left: 1px solid;padding: 14px 0;">
                <div>
                  <el-statistic title="查验失败">
                    <template slot="formatter">
                      {{form.checkFail}}张
                    </template>
                  </el-statistic>
                </div>
              </el-col>
            </el-row>
            <el-row style="margin-top: 10px;width: 102%;margin-left: -1%;">
              <el-table
                border
                stripe
                default-expand-all
                :data="tInCollectEntryList"
                :row-style="rowClass"
                :header-cell-style= "{
                'font-size': '14px !important',
                'font-weight': '500 !important',
                'color': 'rgb(0 0 0)',
                'background-color': 'rgb(205 224 255)',
              }"
                highlight-current-row style="width: 100%;"
                height="300"
              >
                <el-table-column label="序号" type="index" align="center" width="55">
                  <template slot-scope="scope">
                    <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="图片" align="center" key="invoiceUrl" prop="invoiceUrl" width="160">
                  <template slot-scope="scope">
                    <el-image
                      style="width: 80px; height: 80px"
                      :src="baseURL + scope.row.invoiceUrl"
                      :preview-src-list="invoiceUrlList"
                      fit="fill"></el-image>
                  </template>
                </el-table-column>
                <el-table-column label="发票类型" align="center" key="invoiceTypeName" prop="invoiceTypeName"  width="120" show-overflow-tooltip />
                <el-table-column label="查验状态" align="center" key="checkStatusName" prop="checkStatusName"  width="120" show-overflow-tooltip />
                <el-table-column label="入池状态" align="center" key="enterStatusName" prop="enterStatusName"  width="140" show-overflow-tooltip />
                <el-table-column label="发票代码" align="center" key="invoiceCode" prop="invoiceCode"  width="140" show-overflow-tooltip />
                <el-table-column label="发票号码" align="center" key="invoiceNo" prop="invoiceNo"  width="140" show-overflow-tooltip />
                <el-table-column label="开票日期" align="center" key="invoiceDate" prop="invoiceDate"  width="140" show-overflow-tooltip />
                <el-table-column label="金额(不含税)" align="center" key="feeWithoutTax" prop="feeWithoutTax"  width="150" show-overflow-tooltip />
                <el-table-column label="税额" align="center" key="tax" prop="tax" />
                <el-table-column label="金额(含税)" align="center" key="fee" prop="fee" width="140"/>
                <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="140">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      @click="handleOpenInvoice(scope.row)"
                      v-hasPermi="['doc:invoice:edit']"
                    >查看</el-button>
                  </template>
                </el-table-column>
                <div slot="empty">
                  <svg-icon icon-class="search-none" style="font-size: 64px;" />
                  <p>暂无数据</p>
                </div>
              </el-table>
            </el-row>

          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary"  size="mini" @click="submitForm">确 定</el-button>
          <el-button  size="mini" @click="cancel">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 查看发票 -->
      <el-dialog v-dialogDrag  :close-on-click-modal="false" title="查看发票" :visible.sync="invoiceOpen" width="1400px" append-to-body>
        <div class="dialog_box" style="height:650px;">
          <el-row>
            <el-col :span="10">
              <div style="height:575px; overflow-y: auto">
                <el-tabs type="border-card">
                  <el-tab-pane label="发票信息">
                    <el-descriptions class="margin-top" title="基本信息" :column="2" size="mini" border>
                      <template slot="title">
                        <div>基本信息 <span class="invoice-type">{{detailForm.invoiceTypeName}}</span></div>
                      </template>
                      <el-descriptions-item>
                        <template slot="label">
                          发票代码：
                        </template>
                        {{detailForm.invoiceCode}}
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          发票号码：
                        </template>
                        {{detailForm.invoiceNo}}
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          开票日期：
                        </template>
                        {{detailForm.invoiceDate}}
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          金额(不含税):
                        </template>
                        ¥{{detailForm.feeWithoutTax | formatCurrency}}
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          税额:
                        </template>
                        ¥{{detailForm.tax | formatCurrency}}
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          金额(含税):
                        </template>
                        ¥{{detailForm.fee | formatCurrency}}
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          校验码:
                        </template>
                        {{detailForm.checkCode}}
                      </el-descriptions-item>
                    </el-descriptions>

                    <el-descriptions class="margin-top" title="抬头信息" :column="1" size="mini" border>
                      <template slot="extra">
                        <el-radio-group v-model="isWithout" size="mini">
                          <el-radio-button label="销方"></el-radio-button>
                          <el-radio-button label="购方"></el-radio-button>
                        </el-radio-group>
                      </template>
                      <el-descriptions-item>
                        <template slot="label">
                          名称:
                        </template>
                        {{detailForm.name}}
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          纳税识别号:
                        </template>
                        {{detailForm.buyerNumber}}
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          地址、电话:
                        </template>
                        {{detailForm.buyerAddress}}-{{detailForm.buyerTel}}
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          开户行及账号:
                        </template>
                        {{detailForm.buyerBank}}-{{detailForm.buyerAccount}}
                      </el-descriptions-item>
                    </el-descriptions>

                    <el-descriptions class="margin-top" title="业务信息" :column="2" size="mini" border>

                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-user"></i>
                          发货日期:
                        </template>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          特殊开票:
                        </template>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          开票网点:
                        </template>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          站点:
                        </template>
                      </el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions class="margin-top" title="商品明细" :column="1" size="mini" border >
                      <template slot="extra">
                        <el-radio-group v-model="isWithout" size="mini">
                          <el-radio-button label="含税"></el-radio-button>
                          <el-radio-button label="不含税"></el-radio-button>
                        </el-radio-group>
                      </template>
                      <el-descriptions-item>
                        <el-table
                          border
                          stripe
                          default-expand-all
                          ref="invoiceDetailEntry"
                          v-loading="loading"
                          :data="invoiceEntryList"
                          :header-cell-style= "{
                          'font-size': '12px !important',
                          'font-weight': '500 !important',
                          'color':'#FFF',
                          'padding': '0px 0',
                          'background-color':'rgb(51 112 255 / 80%)',
                          textAlign: 'left',
                          'height': '30px !important'
                        }"
                          :cell-style="{ padding: '8px 10px 8px 0', textAlign: 'left' }"
                          highlight-current-row
                          style="width: 555px;margin-left: -32px;margin-top: -10px;"
                          height="300px"
                        >
                          <el-table-column type="selection" width="55" align="center" />
                          <el-table-column label="序号" align="center" prop="index" width="50">
                            <template slot-scope="scope">{{scope.$index+1}}</template>
                          </el-table-column>
                          <el-table-column label="项目名称" align="left" prop="itemName" />
                          <el-table-column label="规格型号" align="left" prop="invoiceCode" />
                          <el-table-column label="单位" align="left" prop="unit" />
                          <el-table-column label="数量" align="left" prop="qty" />
                          <el-table-column label="单价(不含税)" align="left" prop="withoutPrice" v-if="isWithout!='含税'"/>
                          <el-table-column label="金额(不含税)" align="left" prop="withoutAmount" v-if="isWithout!='含税'" />
                          <el-table-column label="单价(含税)" align="left" prop="price" v-if="isWithout=='含税'" />
                          <el-table-column label="金额(含税)" align="left" prop="amount" v-if="isWithout=='含税'" />
                          <el-table-column label="税率" align="left" prop="taxRate" />
                          <el-table-column label="税额" align="left" prop="tax" />
                          <div slot="empty">
                            <svg-icon icon-class="search-none" style="font-size: 64px;" />
                            <p>暂无数据</p>
                          </div>
                        </el-table>
                      </el-descriptions-item>

                    </el-descriptions>


                  </el-tab-pane>
                </el-tabs>
              </div>
            </el-col>
            <el-col :span="14">
              <div style="height: 575px; background-color:#404040;">
                <div v-viewer style="visibility: hidden;height:575px">
                  <img v-for="src in images" :key="src" :src="src" :data-source="src">
                </div>

              </div>
            </el-col>
          </el-row>
        </div>
      </el-dialog>

      <!-- 导入对话框 -->
<!--      <el-dialog v-dialogDrag  :close-on-click-modal="false" :title="upload.title" :visible.sync="upload.open" width="800px" append-to-body>-->
<!--        <div class="dialog_box">-->
<!--          <el-row>-->
<!--            <el-col :span="24">-->
<!--              <el-form ref="uploadForm" label-width="150px" size="mini">-->
<!--                <el-form-item label="选择票夹(必填):">-->
<!--                  <el-select v-model="uploadFolderId" placeholder="请选择票夹" clearable filterable @change="handleChangeFolder">-->
<!--                    <el-option-->
<!--                      v-for="folder in folderList"-->
<!--                      :key="folder.folderId"-->
<!--                      :label="folder.folderName"-->
<!--                      :value="folder.folderId"-->
<!--                    ></el-option>-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--              </el-form>-->
<!--            </el-col>-->
<!--            <el-col :span="24">-->
<!--              <el-alert-->
<!--                title="上传发票文件(pdf/jpg/jpeg/png格式)，单个图片不大于6M，单个PDF文件不大于10M，至多可上传50个文件同时提交（pdf文件支持多页全票种识别)"-->
<!--                :closable="false"-->
<!--                type="warning"-->
<!--                show-icon>-->
<!--              </el-alert>-->
<!--              <el-upload-->
<!--                ref="upload"-->
<!--                class="upload-with500"-->
<!--                :limit="50"-->
<!--                accept=".jpg, .jpeg, .png, .pdf, .ofd"-->
<!--                :headers="upload.headers"-->
<!--                :action="upload.url + '?updateSupport=' + upload.updateSupport"-->
<!--                :disabled="upload.isUploading"-->
<!--                :on-progress="handleFileUploadProgress"-->
<!--                :on-success="handleFileSuccess"-->
<!--                :auto-upload="false"-->
<!--                :file-list="fileList"-->
<!--                name="file"-->
<!--                multiple-->
<!--                drag-->
<!--              >-->
<!--                <i class="el-icon-upload"></i>-->
<!--                <div class="el-upload__text">-->
<!--                  将文件拖到此处，或-->
<!--                  <em>点击上传</em>-->
<!--                </div>-->
<!--              </el-upload>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--        </div>-->
<!--        <div slot="footer" class="dialog-footer">-->
<!--          <el-button size="mini" type="primary" @click="submitFileForm" :loading="upload.isUploading">确 定</el-button>-->
<!--          <el-button size="mini" @click="upload.open = false">取 消</el-button>-->
<!--        </div>-->
<!--      </el-dialog>-->


    </el-card>
  </div>
</template>

<script>
import { listCollect, getCollect, delCollect, addCollect, updateCollect, uploadRecogcollectImg } from "@/api/doc/collect";
import { listFolder } from "@/api/doc/folder";
/* 城市列表 **/
import { provinceList, cityList, districtList } from "@/api/system/city";
import { getToken } from "@/utils/auth";

export default {
  name: "Collect",
  dicts: ['invoice_status', 'invoice_type', 'sign_status'],
  data() {
    return {
      baseURL: this.getBaseURL(),
      invoiceUrlList: [],
      activeName:'first',
      advanced: false,
      tableHeight: this.getInitTableHeight(),
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 子表选中数据
      checkedTInCollectEntry: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      tableKey: 13,
      //
      columnsKey: 'collect',
      // 自定义列
      columns: [
          // {
          //     key: 0,
          //     label: `公司`,
          //     visible: true
          // },
          {
              key: 1,
              label: `采集批次号`,
              visible: true
          },
          {
              key: 2,
              label: `采集人`,
              visible: true
          },
          {
              key: 3,
              label: `采集时间`,
              visible: true
          },
          {
              key: 4,
              label: `采集状态`,
              visible: true
          },
          {
              key: 5,
              label: `识别失败`,
              visible: true
          },
          {
              key: 6,
              label: `重复采集`,
              visible: true
          },
          {
              key: 7,
              label: `异常发票`,
              visible: true
          },
          {
              key: 8,
              label: `查验成功`,
              visible: true
          },
          {
              key: 9,
              label: `查验失败`,
              visible: true
          }
      ],
      // 总条数
      total: 0,
      // 发票采集表格数据
      collectList: [],
      // 发票采集明细表格数据
      tInCollectEntryList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 修改时间时间范围
      daterangeCreateTime: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        params:{

        },
        collectNo: null,
        custId: null,
        custName: null,
        siteCode: null,
        siteName: null,
        collectFail: null,
        collectRepeat: null,
        collectSuccess: null,
        collectException: null,
        checkSuccess: null,
        checkFail: null,
        createName: null,
        createTime: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      detailForm:{},
      invoiceEntryList:[],
      isWithout:'含税',
      invoiceOpen:false,
      images:['https://picsum.photos/300/200'],
      uploadFolderId: null,
      uploadFolderName: null,
      folderList: [],
      // 导入参数
      upload: {
          // 是否显示弹出层（导入）
          open: false,
          // 弹出层标题（导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的数据
          updateSupport: 0,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: null
      },
      // 导入参数
      excelUpload: {
          // 是否显示弹出层（导入）
          open: false,
          // 弹出层标题（导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的数据
          updateSupport: 0,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: ''
      },
      fileList: [],

      manualCheckOpen: false,
      manualCheckList: [],
      manualCheckItem: {

      },
      manualCheckRules: {
          folderId: [
              { required: true, trigger: "blur", message: "必须选择票夹" }
          ],
          invoiceType: [
              { required: true, trigger: "blur", message: "必须填写发票类型" }
          ],
          invoiceNo: [
              { required: true, trigger: "blur", message: "必须填写发票号码" }
          ],
          invoiceDate: [
              { required: true, trigger: "blur", message: "必须填写开票日期" }
          ],
          invoiceCode: [
              { required: true, trigger: "blur", message: "必须填写发票代码" }
          ],
          feeWithoutTax: [
              { required: true, trigger: "blur", message: "必须填写不含税金额" }
          ],
      },

      scanForm:{

      },
      scanFormRules: {
            folderId: [
                { required: true, trigger: "blur", message: "必须选择票夹" }
            ],
            qrcode: [
                { required: true, trigger: "blur", message: "扫码内容不能为空" }
            ],
      },

      excelImportForm:{
          folderId : null
      },
      excelImportFormRules: {
          folderId: [
              { required: true, trigger: "blur", message: "必须选择票夹" }
          ],
          file: [
              { required: true, trigger: "blur", message: "Excel文件不能为空" }
          ],
      },

        /* ======================================省市区======================================  */
      // 省
      provinceId: null,
      provinceList:[],
      // 市
      cityId: null,
      cityList:[],
      // 区
      districtId: null,
      districtList:[],

    };
  },
  created() {
    this.getFolderList();
    this.getList();
  },
  methods: {
    /** 行样式 */
    rowClass({ row, rowIndex }) {
      if (this.ids.includes(row.id)) {
          return { background: "#d9edf7", height:'20px' };
      } else {
          return { height:'20px'};
      }
    },
   /** 隐藏搜索按钮操作 */
   showSearchFun(isShowSearch){
      this.showSearch = isShowSearch
      let oldHeight = this.$refs.queryRef.$el.offsetHeight
      if(!isShowSearch){
          //当前是显示状态
          oldHeight = oldHeight + 12
      }else{
          oldHeight = oldHeight - 12
      }
      this.$nextTick(() => (
         this.tableHeight = this.$refs.tableRef.$el.offsetHeight - (this.$refs.queryRef.$el.offsetHeight-oldHeight)
      ))
    },
    /** 展开按钮操作 */
    toggleAdvanced() {
      const oldHeight = this.$refs.queryRef.$el.offsetHeight
      this.advanced = !this.advanced
      this.$nextTick(() => (
         this.tableHeight = this.$refs.tableRef.$el.offsetHeight - (this.$refs.queryRef.$el.offsetHeight-oldHeight)
      ))
    },
    getFolderList() {
        let params = {
            pageNum: 1,
            pageSize: 9999,
            params:{

            },
        }
        listFolder(params).then(response => {
            this.folderList = response.rows;
        });
    },
    /** 查询发票采集列表 */
    getList() {
      this.loading = true;
      this.queryParams.params = {};
      if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
        this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
        this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
      }
      listCollect(this.queryParams).then(response => {
        this.collectList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        collectNo: null,
        custId: null,
        custName: null,
        siteCode: null,
        siteName: null,
        collectFail: null,
        collectRepeat: null,
        collectSuccess: null,
        collectException: null,
        checkSuccess: null,
        checkFail: null,
        createName: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.tInCollectEntryList = [];
      this.resetForm("form");
    },


      /* ※※ 查询 省市区 相关方法 start ※※ */
      // 获取省
      getProvinceList(){
          provinceList().then(response => {
              this.provinceList = response.data;
          });
      },
      // 获取市
      getCityList(){
          console.log(this.provinceId);
          cityList( {"parentId" : this.provinceId } ).then(response => {
              this.cityList = response.data;
          });
      },
      // 获取区县
      getDistrictList(){
          districtList( {"parentId" : this.cityId } ).then(response => {
              this.districtList = response.data;
          });
      },
      // 选中省份
      handleChangeProvince(val){
          // 给表单省字段赋值
          this.form.provinceid = val;
          let province = {};
          province = this.provinceList.find((item)=>{
              return item.id === val;
          });
          this.form.province = province.name;
          // 城市数据清空、区县数据清空;
          this.cityList = [];
          this.districtList = [];
          // 已选市、区数据清空
          this.cityId = null;
          this.districtId = null;
          // 表单城市、区县数据清空
          this.form.cityid = null;
          this.form.city = null;
          this.form.areaid = null;
          this.form.area = null;
          // 获取城市数据
          this.getCityList();
      },
      // 清空省份
      handleClearProvince(){
          // 城市数据清空、区县数据清空;
          this.cityList = [];
          this.districtList = [];
          // 已选市、区数据清空
          this.cityId = null;
          this.districtId = null;
          // 表单城市、区县数据清空
          this.form.cityid = null;
          this.form.city = null;
          this.form.areaid = null;
          this.form.area = null;
      },
      // 选中城市
      handleChangeCity(val){
          // 给表单市字段赋值
          this.form.cityid = val;
          let city = {};
          city = this.cityList.find((item)=>{
              return item.id === val;
          });
          this.form.city = city.name;
          // 区县数据清空
          this.districtList = [];
          // 已选区县清空
          this.districtId = null;
          // 表单区县清空
          this.form.areaid = null;
          this.form.area = null;
          // 获取城市数据
          this.getDistrictList();
      },
      // 清空省份
      handleClearCity(){
          // 区县数据清空
          this.districtList = [];
          // 已选区县清空
          this.districtId = null;
          // 表单区县清空
          this.form.areaid = null;
          this.form.area = null;
      },
      // 选中区县
      handleChangeDistrict(val){
          // 给表单省字段赋值
          this.form.areaid = val;
          let district = {};
          district = this.districtList.find((item)=>{
              return item.id === val;
          });
          this.form.area = district.name;
      },
      // 清空省份
      handleClearDistrict(){
          // 表单区县清空
          this.form.areaid = null;
          this.form.area = null;
      },

      /* ※※ 查询 省市区 相关方法 end ※※ */


    /** 导入按钮操作 */
    handleImport() {
        this.upload.title = "上传采集";
        this.upload.open = true;

    },

    /** 手动检查按钮操作 */
    handleManualCheck() {
        this.manualCheckOpen = true;
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeCreateTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加发票采集";
    },
    /** 查看结果按钮操作 */
    handleViewResult(row) {
      this.reset();
      const id = row.id || this.ids
      getCollect(id).then(response => {
        this.form = response.data;
        this.tInCollectEntryList = response.data.tinCollectEntryList;
        let baseURL = this.baseURL;
        this.invoiceUrlList = this.tInCollectEntryList.map(function(item) {
            return baseURL + item.invoiceUrl;
        });
        this.open = true;
        this.title = "发票采集结果";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.tInCollectEntryList = this.tInCollectEntryList;
          if (this.form.id != null) {
            updateCollect(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addCollect(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    removeAllManualCheckItem(){
      this.manualCheckList = [];
    },
    submitManualCheckItem(){

    },

    submitScanForm(){

    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除发票采集编号为"' + ids + '"的数据项？').then(function() {
        return delCollect(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 发票采集明细序号 */
    rowTInCollectEntryIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 发票采集明细添加按钮操作 */
    handleAddTInCollectEntry() {
      let obj = {};
      obj.collectNo = "";
      obj.entryId = "";
      obj.collectTime = "";
      obj.custId = "";
      obj.custName = "";
      obj.siteCode = "";
      obj.siteName = "";
      obj.invoiceType = "";
      obj.invoiceTypeName = "";
      obj.invoiceUrl = "";
      obj.sellerName = "";
      obj.checkStatus = "";
      obj.checkStatusName = "";
      obj.enterStatus = "";
      obj.enterStatusName = "";
      obj.invoiceCode = "";
      obj.invoiceNo = "";
      obj.invoiceDate = "";
      obj.fee = "";
      obj.feeWithoutTax = "";
      obj.tax = "";
      obj.sourceType = "";
      obj.sourceTypeName = "";
      obj.createName = "";
      this.tInCollectEntryList.push(obj);
    },
    /** 发票采集明细删除按钮操作 */
    handleDeleteTInCollectEntry() {
      if (this.checkedTInCollectEntry.length == 0) {
        this.$modal.msgError("请先选择要删除的发票采集明细数据");
      } else {
        const tInCollectEntryList = this.tInCollectEntryList;
        const checkedTInCollectEntry = this.checkedTInCollectEntry;
        this.tInCollectEntryList = tInCollectEntryList.filter(function(item) {
          return checkedTInCollectEntry.indexOf(item.index) == -1
        });
      }
    },
    /** 复选框选中数据 */
    handleTInCollectEntrySelectionChange(selection) {
      this.checkedTInCollectEntry = selection.map(item => item.index)
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('doc/collect/export', {
        ...this.queryParams
      }, `collect_${new Date().getTime()}.xlsx`)
    },

    // 提交上传文件
    submitFileForm() {
        if(!this.uploadFolderId){
            this.$modal.msgError("请先选择票夹");
            return;
        }
        if(this.fileList.length > 0){
            this.upload.isUploading = true;
            let formData = new FormData();  //  用FormData存放上传文件
            this.fileList.forEach(file => {
                formData.append('files', file);
                console.log("file");
                console.log(file);
            });
            uploadRecogcollectImg(this.uploadFolderId, formData).then(response => {
                this.upload.isUploading = false;
                this.$modal.msgSuccess("上传成功");
                this.fileList = [];
                this.getList();
            }).catch(() => {
                this.upload.isUploading = false;
                this.fileList = [];
            });
        } else {
            this.$modal.msgError("请先选择发票文件");
            this.upload.isUploading = false;
            return;
        }
    },

    // 提交上传文件
    submitExcelFileForm() {
        if(!this.excelImportForm.folderId){
            this.$modal.msgError("请先选择票夹");
            return;
        }
        this.$refs.excelUpload.submit();
    },

    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
    },

    // 上传前loading加载
    handleBeforeUpload(file) {
        this.fileList.push(file); // 将选中的文件添加到fileList数组中
        // 阻止默认上传行为
        return false;
    },

    // excel上传前loading加载
    handleExcelBeforeUpload(file) {

    },

    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.$alert(response.msg, "上传结果", { dangerouslyUseHTMLString: true });
        //
    },

    // 文件上传中处理
    handleExcelFileUploadProgress(event, file, fileList) {
        this.excelUpload.isUploading = true;
    },

    // 文件上传成功处理
    handleExcelFileSuccess(response, file, fileList) {
        this.excelUpload.open = false;
        this.excelUpload.isUploading = false;
        this.$refs.excelUpload.clearFiles();
        this.$alert(response.msg, "Excel上传结果", { dangerouslyUseHTMLString: true });
        //
    },

    handleManualCheckRowClick(row, column, event){
        this.manualCheckItem = row;
        this.$refs.manualCheckItemForm.toggleRowSelection(row);
    },
    deleteManualCheck(idx){
        this.manualCheckList.splice(idx,1);
    },
    // 新增手动发票检查
    addManualCheckItem(){
        this.$refs["manualCheckItemForm"].validate(valid => {
            if (valid) {
                this.manualCheckItem.folderName = this.uploadFolderName;
                this.manualCheckList.push(this.manualCheckItem);
                this.manualCheckItem = {};
            }
        });
    },
    handleOpenInvoice(o) {
        this.invoiceOpen = true;
        // TODO 获取附件
        this.detailForm = o;
    },

    handleChangeFolder(){
      if(this.uploadFolderId) {
          this.upload.url = this.getBaseURL() + "/doc/collect/" + this.uploadFolderId + "/importImg";
      }
      this.folderList.forEach(item => {
          if(item.folderId === this.uploadFolderId) {
              this.uploadFolderName = item.folderName;
          }
      })
    },

    handleChangeExcelFolder(){
      if(this.excelImportForm.folderId) {
          this.excelUpload.url = this.getBaseURL() + "/doc/collect/" + this.excelImportForm.folderId + "/importExcel";
      }
      this.folderList.forEach(item => {
          if(item.folderId === this.excelImportForm.folderId) {
              this.uploadFolderName = item.folderName;
          }
      })
    },
    handleChangeFolderForManual(){
      this.folderList.forEach(item => {
          if(item.folderId === this.manualCheckItem.folderId) {
              this.uploadFolderName = item.folderName;
          }
      });
    },

    /** 下载模板操作 */
    downloadTemplate() {
        this.download('doc/collect/importExcelTemplate', {}, `发票采集导入模板${new Date().getTime()}.xlsx`)
    },
  }
};
</script>
<style lang="scss" scoped>
  .el-upload .el-upload--text .el-upload-dragger {
    width: 752px !important;
  }
  .upload-with500{
    text-align: center;
  }
  .el-statistic .head {
    color: #000;
    font-size: 14px;
  }
  .el-statistic .con .number {
    color: #000 !important;
    font-size: 14px !important;
    padding: 4px;
  }
</style>
